<template>
    <!-- 水墨加载动画 -->
    <InkSplash></InkSplash>
    <div class="splash-bg">
        <div class="splash-content">
            <img
                class="logo-img"
                src="https://s3plus.meituan.net/opapisdk/op_ticket_1_885190757_1761387501349_qdqqd_zjdpue.png"
                alt="logo"
            />
            <div class="splash-title">
                <img :src="PageAssets.homeOrganizeLogo" alt="" />
            </div>
            <div class="splash-percent">{{ percent }}%</div>
        </div>
    </div>
</template>

<script setup>
// 引入 Vue 的响应式和生命周期钩子
import { ref, onMounted, onBeforeUnmount } from "vue";
import InkSplash from "@/components/InkSplash.vue";
// 引入 vue-router 的路由钩子，用于页面跳转
import { useRouter } from "vue-router";
import { getPageAssets } from "./api";

const PageAssets = ref("");
// 百分比进度，控制加载动画的数字显示
const percent = ref(0);
// 获取 canvas DOM 元素的引用，用于绘制水墨背景
const inkSplash = ref(null);
// 定时器句柄，用于清理 setInterval
let timer = null;
// 获取路由实例，用于跳转到首页
const router = useRouter();

// 组件挂载后执行的逻辑
onMounted(async () => {
    PageAssets.value = await getPageAssets();
    // 1. 百分比动画逻辑
    // 每隔 30ms 增加进度，模拟加载过程
    timer = setInterval(() => {
        if (percent.value < 100) {
            // 每次递增 1~3，增加加载的随机感
            percent.value += Math.floor(Math.random() * 3) + 1;
            // 超过 100 时强制归为 100
            if (percent.value > 100) percent.value = 100;
        } else {
            // 达到 100% 后，清除定时器
            clearInterval(timer);
            // 延迟 400ms 让用户看到 100%，再跳转到首页
            setTimeout(() => {
                router.replace("/home"); // 跳转到首页路由
            }, 1550);
        }
    }, 30);
});

// 组件卸载前清理定时器，防止内存泄漏
onBeforeUnmount(() => {
    if (timer) clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.splash-bg {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

.splash-content {
    position: relative;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo-img {
    width: 40rem;
}
.splash-title {
    font-size: 3rem;
    @media (min-width: 768px) {
        font-size: 3.75rem;
    }
    font-weight: bold;
    color: #fff;
    font-family: serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
    user-select: none;
    img {
        width: 30rem;
    }
}

.splash-percent {
    font-size: 1.5rem;
    color: #fff;
    font-family: monospace;
    margin-bottom: 0.5rem;
    user-select: none;
}
</style>
